<template>
	<view>
		<u-navbar :is-back="false" :background="{backgroundColor: '#4E55AF'}" height="50">
			<view class="flex justify-between items-center w-full">
				<view class="flex justify-start items-center">
					<view class="rounded-lg ml-[30rpx] bg-white p-[10rpx] mr-[12rpx]">
						<u-image width="40rpx" height="40rpx" :src="appStore.getWebsiteConfig.shop_logo"></u-image>
					</view>
					<view class="">
						{{t('item.titleIndex')}}
					</view>
				</view>
				<view class="flex justify-end pr-[30rpx] ">
					<navigator hover-class="none" url="/pages/item/record">
						<u-icon size="40" name="/static/images/common/record.png"></u-icon>
					</navigator>
				</view>
			</view>
		</u-navbar>
		<view class="bg-[#4E55AF] pt-[30rpx] mb-[30rpx] pb-[150rpx]">
			<view class="vipbg mx-[30rpx] relative items-center flex">
				<view class="text-white text-left mx-[30rpx]">{{t('robot.currentLevel')}}: {{data.user.member.name}}
				</view>
				<view class="absolute right-[30rpx] top-[-30rpx]">
					<u-image width="200rpx" mode="widthFix" :src="data.user.member.logo"></u-image>
				</view>
			</view>
		</view>
		<view class="mb-[30rpx] mt-[-150rpx]">
			<view class="bg-[#2C326B] mx-[30rpx] px-[30rpx] py-[40rpx] rounded-lg">
				<view class="flex justify-between items-center">
					<view class="w-1/2 text-center">
						<view class="text-2xl text-[#A1DBF5] mb-[10rpx]">
							{{formatMoney(data.user.totalMoney)}}
						</view>
						<view class="">
							{{t('item.myItems')}}
						</view>
					</view>
					<view class="">
						|
					</view>
					<view class="w-1/2 text-center">
						<view class="text-2xl text-[#A1DBF5] mb-[10rpx]">
							{{formatMoney(data.user.totalIncome)}}
						</view>
						<view class="">
							{{t('item.totalIncome')}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="mx-[30rpx]">
			<view class="flex  mb-[30rpx]">
				<u-icon size="38" name="clock-fill"></u-icon>
				<text class="ml-[6rpx]">{{date}}</text>
			</view>
		</view>

		<view class="mx-[30rpx] mb-[20rpx]">
			<view class="">
				<w-item :items="data.items" />
			</view>
		</view>
	</view>
	<tabbar />
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import { useAppStore } from '@/stores/app'
	import { onUnload, onHide, onShow } from '@dcloudio/uni-app'
	import { formatDate, formatMoney, t } from '@/utils/util'
	import { getIndex } from '@/api/item'

	uni.setNavigationBarTitle({ title: t('item.titleIndex') })
	const appStore = useAppStore()

	let timer : any = null

	const date = ref('')
	const data = reactive({
		user: {
			totalMoney: 0,
			todayIncome: 0,
			totalIncome: 0,
			balance: 0,
			member: []
		},
		items: [],
		date: ''
	})

	const getTimer = async () => {
		timer && clearInterval(timer)

		timer = setInterval(() => {
			let serverDateTime = new Date(data.date)
			serverDateTime.setSeconds(serverDateTime.getSeconds() + 1)
			date.value = formatDate(new Date(serverDateTime).getTime() / 1000, uni.getStorageSync('formatTime'));
			data.date = date.value;
		}, 1000)
	}

	const getData = async () => {
		const res = await getIndex()
		data.date = res.server_date
		getTimer();

		data.user = res.user;
		data.items = res.items;
	}

	onUnload(() => {
		timer && clearInterval(timer)
	})
	onShow(() => {
		getData()
	})
	onHide(() => {
		timer && clearInterval(timer)
	})
</script>

<style lang="scss">
	.vipbg {
		background-image: url('/static/images/quantify/vipbg.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: center;
		height: 68px;
	}
</style>